<template>
    <div class="head-info" :class="{topHide : arrowShow}">
        <div class="info">
            <div class="info_one" v-if="pageType === 'mark'">
                <div class="info_one_left" @click="changeFileList">
                    <i class="manue" :class="{seleted : listShow}"></i>
                    <span>文件序列</span>
                    <span style="padding-left:4px;">: {{currentFileId}}</span>
                </div>
                <div class="info_one_right">
                    <i class="schedule"></i>
                    <span class="markpro">标注进度：
                        <span class="fs14">{{ finishNum }}</span>/{{allFiles.length}}</span>
                </div>
                <i class="divide"></i>
            </div>
            <div class="allFile" v-if="pageType === 'mark'">
                <span v-if="filesType == 1">全部数据</span>
                <span v-if="filesType == 2">好数据</span>
                <span v-if="filesType == 3">坏数据</span>
                <span v-if="filesType == 4">未标注</span>
                <ul class="fileType">
                    <li @click="selectDataListType(1)" :class="{unclickable : !fileLength[0]}">全部数据</li>
                    <li @click="selectDataListType(2)" :class="{unclickable : !fileLength[1]}">
                        好数据
                    </li>
                    <li @click="selectDataListType(3)" :class="{unclickable : !fileLength[2]}">
                        坏数据
                    </li>
                    <li @click="selectDataListType(4)" :class="{unclickable : !fileLength[3]}">
                        未标注
                    </li>
                </ul>
            </div>
            <div class="info_three" v-if="pageType === 'mark'">
                <div class="info_three_one" @click="preTask">
                    <i></i>
                    <span>上一张</span>
                </div>
                <div class="info_three_two" @click="nextTask">
                    <i></i>
                    <span>下一张</span>
                </div>
                <div class="info_three_three" @click="markBadData">
                    <i></i>
                    <span>{{currentFile.isBad == 1 ? '标为好数据' : '标为坏数据'}}</span>
                </div>
            </div>
            <div class="switch_type" v-if="pageType === 'result'">
                <div class="switch_type_s switch_type_0" v-if="resultPageInfo.showMark" @click="resultFile(0)">
                    <i :class="{selected : resultType == 0}"></i>
                    <span>标注结果</span>
                </div>
                <div class="switch_type_s switch_type_1" v-if="resultPageInfo.showCheck"  @click="resultFile(1)">
                    <i :class="{selected : resultType == 1}"></i>
                    <span>检查结果</span>
                </div>
                <div class="switch_type_s switch_type_2" v-if="resultPageInfo.showTest" @click="resultFile(2)">
                    <i :class="{selected : resultType == 2}"></i>
                    <span>质检结果</span>
                </div>
            </div>
            <div class="info_four">
                <i class="divide"></i>
                <i class="info_four_top" :class="{arrowShow : arrowShow}" @click="hideHeader"></i>
            </div>
        </div>
    </div>
</template>

<script>
// import $ from 'jquery'
export default {
    name: "centerControl",
    data() {
        return {
            listShow: false,
            arrowShow: false,
            fileType: 1
        };
    },
    props: {
        files: {
            type: Object,
            default: () => ({})
        },
        allFiles: {
            type: Array,
            default: () => []
        },
        currentFile: {
            type: Object,
            default: () => ({})
        },
        currentFileId: {},
        filesType: {},
        pageType: {},
        resultType: {
            default: 0
        },
        resultPageInfo:{
          type: Object,
          default: ()=>({})
        }
    },
    computed: {
        finishNum: function() {
            // 查看标注完成个数
            let len = this.allFiles.length,
                result = 0;
            if (len == 0) return "--";
            for (let i = 0; i < len; i++) {
                if (this.allFiles[i].status == 1) {
                    result++;
                }
            }
            return result;
        },
        fileLength: function() {
            var dataL = [0, 0, 0, 0];
            console.log('没有file文件疮毒', this.files)
            if (!this.files || !this.files.allInfo) {
                return dataL;
            }
            let { allInfo } = this.files
            var len = allInfo.length;
            dataL[0] = len;

            allInfo.forEach( info => {
                let { isBad, status } = info
                if (isBad === 0) {//好数据
                dataL[1]++;
                }
                if (isBad === 1) {// 坏数据
                dataL[2]++;
                }
                if (status === 0) {// 未标注
                dataL[3]++;
                }
            })

            return dataL;
        }
    },
    methods: {
        // 隐藏显示文件列表
        changeFileList() {
            this.listShow = !this.listShow;
            this.$emit("changeFileList", this.listShow);
        },
        selectDataListType(type) {
            this.$emit("selectDataListType", type);
        },
        // 上一条
        preTask() {
            this.$emit("preTask");
        },
        // 下一条
        nextTask() {
            this.$emit("nextTask");
        },
        // 标为坏数据
        markBadData() {
            this.$emit("markBadData");
        },
        // 隐藏头部
        hideHeader() {
            this.arrowShow = !this.arrowShow;
            this.$emit("hideHeader", this.arrowShow);
        },
        // 切换任务列表类型
        resultFile(type){
            this.$emit('resultFile', type)
        }
    }
};
</script>
<style lang="less" scoped>
.head-info {
    width: 100%;
    height: 50px;
    background-color: #f2f3f4;
    position: absolute;
    top: 50px;
    left: 0;
    transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    box-shadow: inset 2px 2px 2px 0px #fff, inset 0 0 1px 0px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: inset 2px 2px 2px 0px #fff,
        inset 0 0 1px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 2px 2px 2px 0px #fff,
        inset 0 0 1px 0px rgba(0, 0, 0, 0.6);
}
.topHide {
    min-width: 1024px;
    height: 50px;
    background: -webkit-linear-gradient(#ededed, #f7f7f7);
    background: -o-linear-gradient(#ededed, #f7f7f7);
    background: -moz-linear-gradient(#ededed, #f7f7f7);
    background: linear-gradient(#ededed, #f7f7f7);
    position: absolute;
    top: 0px;
    left: 0;
}
.head-info .info {
    width: 100%;
    height: 100%;
    background-color: #f2f3f4;

    flex-flow: row nowrap;
    margin: 0 auto;
    margin-right: 22px;
    box-shadow: inset 2px 2px 2px 0 #ffffff,
        inset 0 0 10px 0 rgba(9, 22, 22, 0.06);
}
.head-info .info_one {
    display: flex;
    flex-flow: row nowrap;
    margin-left: 20px;
    position: relative;
    float: left;
}
.head-info .info_one .divide {
    display: inline-block;
    width: 3px;
    height: 22px;
    margin: 14px 27px 0 27px;
    background: url("");
}
.head-info .info_one .info_one_left span {
    color: #333333;
    font-size: 14px;
    line-height: 50px;
    cursor: pointer;
}
.head-info .info_one .info_one_left .manue {
    display: inline-block;
    width: 14px;
    height: 11px;
    cursor: pointer;
    margin-right: 5px;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    background: url("~@/assets/images/common/control/file.svg") no-repeat 0 0;
}
.head-info .info_one .info_one_left .seleted {
    transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
}
.head-info .info_one .info_one_left:hover .manue {
    background: url("~@/assets/images/common/control/file-hov.svg") no-repeat 0
        0;
}
.head-info .info_one .info_one_right {
    margin-left: 20px;
    position: relative;
}
.head-info .info_one .info_one_right .schedule {
    display: inline-block;
    width: 14px;
    height: 14px;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 18px;
    background: url("~@/assets/images/common/control/progress.svg") no-repeat 0
        0;
}
.head-info .info_one .info_one_right:hover .schedule {
    background: url("");
}

.allFile {
    position: relative;
    width: 110px;
    float: left;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-right: 10px;
}
.allFile::after {
    background: url("~@/assets/images/common/control/allSlide.svg") no-repeat
        1px 2px;
}
.allFile::before {
    display: inline-block;
    width: 15px;
    height: 15px;
    content: "";
    background: url("~@/assets/images/common/control/allFile.svg") no-repeat 0px
        0px;
    position: absolute;
    left: 0px;
    top: 18px;
}
.allFile > span {
    display: inline-block;
    width: 62px;
    text-align: center;
}
.allFile:hover .fileType {
    display: block;
}
.allFile .fileType {
    position: absolute;
    display: none;
    width: 100px;
    height: 125px;
    background: #fff;
    z-index: 9999;
    left: 16px;
    padding: 5px 2px;
    border-radius: 3px;
    top: 40px;
}
.allFile .fileType li {
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-bottom: 1px solid #eaf0f0;
    cursor: pointer;
}
.allFile .fileType li:last-child {
    border-bottom: 1px solid #fff;
}
.allFile .fileType li:hover {
    color: #14cb6b;
}
.allFile:after {
    display: inline-block;
    width: 18px;
    height: 15px;
    content: "";
}

.head-info .info_three {
    display: flex;
    flex-flow: row nowrap;
    float: left;
}

.head-info .info_three .info_three_one i {
    display: inline-block;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-right: 5px;
    position: relative;
    top: 2px;
    left: 0;
    background: url("~@/assets/images/common/control/prev.svg") no-repeat;
}
.head-info .info_three .info_three_one:hover i {
    background: url("~@/assets/images/common/control/prev-hov.svg") no-repeat;
}
.head-info .info_three .info_three_two {
    margin: 0 24px;
}
.head-info .info_three .info_three_two i {
    display: inline-block;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-right: 5px;
    position: relative;
    top: 2px;
    left: 0;
    background: url("~@/assets/images/common/control/next.svg") no-repeat;
}
.head-info .info_three .info_three_two:hover i {
    background: url("~@/assets/images/common/control/next-hov.svg") no-repeat;
}
.head-info .info_three .divide {
    display: inline-block;
    width: 3px;
    height: 22px;
    margin: 14px 10px 0 430px;
    background: url("");
}
.head-info .info_three .info_three_three i {
    display: inline-block;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-right: 5px;
    position: relative;
    top: 2px;
    left: 0;
    background: url("~@/assets/images/common/control/badFile.svg") no-repeat;
}
.head-info .info_three .info_three_three:hover i {
    background: url("~@/assets/images/common/control/badFile-hov.svg") no-repeat;
}

.head-info .info_four {
    width: 60px;
    float: right;
    position: relative;
}
.head-info .info_four .info_four_top {
    display: inline-block;
    width: 13px;
    height: 11px;
    position: absolute;
    top: 20px;
    right: 22px;
    cursor: pointer;
    background: url("~@/assets/images/common/control/slide.svg") no-repeat
        center;
    transform: rotate(180deg);
}
.head-info .info_four .arrowShow {
    transform: rotate(0deg);
}
.head-info .info_four .divide {
    display: inline-block;
    width: 3px;
    height: 22px;
    margin: 14px 38px 0 3px;
    background-image: url("");
}
.allFile .unclickable {
    color: #cacaca;
    pointer-events: none;
}
.markpro {
    color: #333333;
    font-size: 14px;
    display: inline-block;
    line-height: 50px;
    margin-left: 20px;
    cursor: pointer;
}
.head-info .info_three span {
    color: #333333;
    font-size: 14px;
    line-height: 50px;
    cursor: pointer;
}

.switch_type{
    display: flex;
    flex-flow: row nowrap;
    float: left;
    .switch_type_s{
        margin-left: 20px;
        position: relative;
        i {
            margin-right: 5px;
            position: relative;
            top: 2px;
            left: 0;
            display: inline-block;
            width: 14px;
            height: 14px;
            cursor: pointer;
            background: url('');
        }
        i.selected {
            display: inline-block;
            cursor: pointer;
            background: url('');
        }
        span {
            color: #333333;
            font-size: 14px;
            line-height: 50px;
            cursor: pointer;
        }
    }
    .switch_type_1{

    }
    .switch_type_2{

    }
}
</style>
